<template>
	<view class="topicDetail">
		<view class="detailTop">
			<view class="detailAvatar">
				<image v-if="detail.avatar" :src="hname+detail.avatar" />
				<image v-else src="@/static/images/my_avatar.png" />
			</view>
			<view class="name">{{detail.username?detail.username:'用户'}}</view>
		</view>
		<view class="imageBox">
			<image class="topicImg" :src="'http://localhost:3000/'+detail.mediaUrl" mode="heightFix"></image>
		</view>
		<view class="topicContent">
			<view class="title">{{detail.title}}</view>
			<view class="content">
				{{detail.content}}
			</view>
			<view class="addTime">
				{{timeTransform(detail.createdAt)}}
			</view>
		</view>

		<piaoyi-comment-list :apprises="apprises"></piaoyi-comment-list>
		<view class="topicBottom">
			<view class="" @click="like(detail.isFavorite)">
				<uni-icons v-if="detail.isFavorite" color="red" class="topicStar" type="star-filled"
					size="40"></uni-icons>
				<uni-icons v-else class="topicStar" type="star" size="40"></uni-icons>
			</view>
			<view class="topicInp">
				<input maxlength="20" v-model="comment" class="uni-input" focus placeholder="说点什么吧..." />
			</view>
			<view :class="['sendBtn',{noComment:comment===''}]" @click="submitComment">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	import piaoyiCommentList from '@/uni_modules/piaoyi-commentList/components/piaoyi-commentList/piaoyi-commentList.vue'
	import {
		sendComment,
		getCommentList,
		getTopicDetail,
		addFavorite,
		delFavorite
	} from "@/api/index.js"
	import dayjs from 'dayjs'
	export default {
		components: {
			piaoyiCommentList,
		},
		data() {
			return {
				detail: {},
				userInfo: {},
				comment: '',
				hname: 'http://localhost:3000/',
				apprises: []
			};
		},
		computed: {
			timeTransform() {
				return (value)=> {
					return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
				}
			}
		},
		async onLoad(option) {
			let uInfo = uni.getStorageSync('mini-userinfo')
			if (uInfo) {
				this.userInfo = uInfo
			}
			if (option.topicId) {
				// this.detail = JSON.parse(decodeURIComponent(option.params));
				const detailRes = await getTopicDetail(option.topicId, {
					userId: this.userInfo.id
				})
				this.detail = detailRes.data
				console.log(detailRes, '..............');
				const commentRes = await getCommentList(option.topicId)
				// console.log(commentRes, '?????????????????');
				if (commentRes.statusCode === 200) {
					this.apprises = commentRes.data.data
				}
			}

		},
		methods: {
			async like(isLike) {
				const params = {
					userId: this.userInfo.id,
					topicId: this.detail.id
				}
				if (isFavorite) {
					const res = await delFavorite(params)
					console.log(res, '????????????');
					if (res.statusCode === 200) {
						this.detail.isLike = false
					}
				} else {
					const res = await addFavorite(params)
					if (res.statusCode === 200) {
						this.detail.isLike = true
					}
				}
			},
			async submitComment() {
				if (this.comment === '') return
				const params = {
					content: this.comment,
					userId: this.userInfo.id,
					topicId: this.detail.id
				}
				const res = await sendComment(params)
				if (res.statusCode === 200) {
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					})
					this.comment = ''
					this.apprises.push(res.data)
				}
				console.log(res, '评论？？');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imageBox {
		height: 500rpx;
		background: #F0F8FF;
		display: flex;
		justify-content: center;
		align-items: center;
		.topicImg{
			width: 100%;
			// height: 500rpx;
		}
	}

	.topicDetail {
		width: 100%;
		color: #000000;
		// background: #FFFAF0;
		padding: 20rpx 0;

		.detailTop {
			padding: 0 20rpx;
			width: 100%;
			height: 100rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			// padding: 0 30rpx;

			.detailAvatar {
				// height: 100%;
				display: flex;
				align-items: center;
				// width: 70rpx;
				height: 70rpx;
				margin-right: 16rpx;
				border-radius: 50%;
				overflow: hidden;

				image,
				img {
					width: 70rpx;
					height: 70rpx;
				}

			}

			.name {
				margin-left: 10rpx;
			}
		}

		.topicContent {
			background-color: #ffffff;
			padding: 0 20rpx;
		}

		.title {
			margin-top: 10rpx;
			font-size: 40rpx;
		}

		.content {
			margin-top: 14rpx;
			font-size: 26rpx;
			min-height: 60rpx;
		}

		.addTime {
			background-color: #ffffff;
		}

		.topicBottom {
			background-color: #ffffff;
			border-top: 1px solid #E9E9E9;
			height: 140rpx;
			width: 100%;
			padding: 0 20rpx;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.topicStar {
				margin-right: 30rpx;
			}

			.topicInp {
				flex: 1;
				// border: 2rpx solid #000000;
				background-color: #F5F5F5;
				border-radius: 80rpx;
				height: 90rpx;
				display: flex;
				padding: 30rpx;
				align-items: center;

				.uni-input {
					width: 100%;
					height: 60rpx;
				}
			}

			.sendBtn {
				width: 130rpx;
				height: 80rpx;
				background-color: #FF2442;
				font-size: 34rpx;
				color: #ffffff;
				text-align: center;
				line-height: 80rpx;
				border-radius: 60rpx;
				margin-left: 20rpx;
			}

			.noComment {
				opacity: .5;
			}
		}
	}
</style>